<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MiniChat</title>
</head>

<style type="text/css">
html, body { font-family: "Helvetica"; font-size: 14px; }
.nickname { color: #FF0000; margin-bottom: 10px; }
.room { width: 90%; height: 300px;  border: 2px float: left; margin: 5px; }
#room1 , #room3 , #room4 { border: 1px solid #999; margin-left: 1px; }
.dialog { width: 90%; height: 250px; overflow: auto; border: 2px solid grey; margin: 10px auto;}
#status { font-weight: bold }
</style>

<body>

<div id="status">Starting</div>
<div id="jid">JID: </div>
<div id="nickName">Nickname: </div>
<div id="roomName">Room: </div>
<div id="room1" class="room">Console<br />
	<div id="dialogFrom" class="dialog"></div>
</div>

<div>
  <form name="actions">
    <label>Digite aqui:</label>
    <button type="button" onclick="sendMessage();">Enviar a data pro chat</button>
    <button type="button" onclick="disconnect();">Desconectar</button>
  </form>
</div>

</body>

<script type="text/javascript" src="js/strophe.js"></script>
<script type="text/javascript" charset="utf-8">

var _server = "/http-bind/";
var domain = "example.com";
var jid = "";
var nickName = getQueryArgs()["nickname"] || "teste";
var room = getQueryArgs()["room"] || "teste";
var msg = getQueryArgs()["msg"];

document.getElementById("nickName").innerHTML += nickName;
document.getElementById("roomName").innerHTML += room;
login = true;

try {
    console.log('INITIALIZE LOG');
} catch(i){
    console = {
	log : function(){}
    };
}

function getQueryArgs() {
    var args = [];
    var pairs = location.search.substring(1).split("&");
    for (var i = 0; i < pairs.length; i++) {
	var kv = pairs[i].split("=");
	args[kv[0]] = kv[1];
    }
    return args;
}

function disconnect() {
    connection.disconnect();
    console.log("Bye, bye!");
}

function onPresence(msg) {
    var from = msg.getAttribute('from');
    var type = msg.getAttribute('type') ? msg.getAttribute('type') : 'On-line';
    console.log("Presence from " + from);
    var dialog = document.createElement("div");
    dialog.style.backgroundColor = "peachpuff";
    dialog.innerHTML = "Presenca de " + from + " " + type;
    document.getElementById("dialogFrom").appendChild(dialog);
    return true;
}

function onMessage(msg){
    try {
	var to   = msg.getAttribute('to');
	var from = msg.getAttribute('from');
	var type = msg.getAttribute('type');
	var elems = msg.getElementsByTagName('body');
		
	if(elems.length > 0){
	    var body = elems[0];
	    //alert(type);
	    switch(type){
	    case "chat":
		// Capture the room from "from attr"
		var strRoom = from.split('@')[0];
		//alert(strRoom);
		//document.getElementById("dialogFrom").innerHTML += "<div style=\"background-color: #CCC;\">" + "<i>" + from + "</i> " + Strophe.getText(body) + "</div>";
		var dialog = document.createElement("div");
		dialog.style.backgroundColor = "#CCC";
		dialog.innerHTML = "<i>" + from + "</i> " + Strophe.getText(body);
		document.getElementById("dialogFrom").appendChild(dialog);
	    case "groupchat":
		var strRoom = from.split('@')[0];
		//alert(strRoom);
		//document.getElementById("dialogFrom").innerHTML += "<div style=\"background-color: #FFF;\">" + "<i>" + from + "</i> " + Strophe.getText(body) + "</div>";
		var dialog = document.createElement("div");
		dialog.style.backgroundColor = "#fff";
		dialog.innerHTML = "<i>" + from + "</i> " + Strophe.getText(body);
		document.getElementById("dialogFrom").appendChild(dialog);
		break;
	    }
	}
    } catch(i) {
	alert('Exception ' + i);
    }
	
    onMessage = function(){};
    
    return true;
}

function sendMessage() {
    console.log("Sending message");
    var now = new Date();
    var m = $msg({to: room + "@conference." + domain, type: "groupchat"}).c("body").t(now);
    connection.send(m.tree());
}

var callbackIni = function(status, cond) {
    switch(status) {
    case 0:
	console.log("ERROR");
	document.getElementById("status").innerHTML = "An error has occurred";
	break;
    case 1:
	console.log("CONNECTING");
	document.getElementById("status").innerHTML = "The connection is currently being made";
	break;
    case 2:
	console.log("CONNFAIL");
	document.getElementById("status").innerHTML = "The connection attempt failed";
	break;
    case 3:
	console.log("AUTHENTICATING");
	document.getElementById("status").innerHTML = "The connection is authenticating";
	break;
    case 4:
	console.log("AUTHFAIL");
	document.getElementById("status").innerHTML = "The authentication attempt failed";
	break;
    case 5:
	console.log("CONNECTED");
	document.getElementById("status").innerHTML = "The connection has succeeded";
	document.getElementById("jid").innerHTML += connection.jid;
	//$pres.setAttribute('priority', 120);
	$pres({priority: 120});
	connection.addHandler(onPresence, null, "presence", null, null, null);
	connection.addHandler(onMessage, null, "message", "chat", null,  null);
	connection.addHandler(onMessage, null, "message", "groupchat", null,  null);

	var p = $pres({to: room + "@conference." + domain + "/" + nickName });
	connection.send(p.tree());
	console.log("Joined room " + room);

	break;
    case 6:
	console.log("DISCONNECTED");
	document.getElementById("status").innerHTML = "The connection has been terminated";
	break;
    case 7:
	console.log("DISCONNECTING");
	document.getElementById("status").innerHTML = "The connection is currently being terminated";
	break;
    }
};

if(login == true){
    var connection = new Strophe.Connection(_server);
    connection.connect(domain, null, callbackIni);
}
</script>
</body>
</html>
